<template>
  <FullscreenCard class="wrapper">
    <div class="grid" ref="charDom"/>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import _ from 'lodash-es'
import FullscreenCard from '@/components/FullscreenCard'

const charDom = ref<any>([])

const dataList = [{
  id: '1',
  name: '密度',
  data: [
    [0.2, 500],
    [0.6, 900],
    [0.4, 1100],
    [0.7, 1300],
    [1.5, 2200],
    [1.7, 2100],
  ]
}, {
  id: '2',
  name: '漏斗',
  data: [
    [0.3, 600],
    [0.6, 1000],
    [0.4, 1200],
    [0.7, 1400],
    [1.5, 1600],
    [1.8, 2400],
  ]
}, {
  id: '3',
  name: '初切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1000],
    [0.7, 1200],
    [1.5, 1400],
    [0.8, 2000],
  ]
}, {
  id: '4',
  name: '动切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1000],
    [0.7, 1200],
    [1.5, 1400],
    [0.8, 2000],
  ]
}, {
  id: '5',
  name: '终切',
  data: [
    [0.5, 300],
    [0.6, 700],
    [0.4, 1300],
    [0.7, 1500],
    [1.5, 1700],
    [0.8, 2600],
  ]
}, {
  id: '6',
  name: '塑性',
  data: [
    [0.7, 100],
    [0.5, 400],
    [0.4, 600],
    [0.7, 1100],
    [1.5, 1200],
    [0.8, 2100],
  ]
}]

const maxYValue:any = _.max(dataList.map((v:any) => _.max(v.data.map((d:any) => d[1]))))
const interval = _.ceil(maxYValue, -3)/5
console.log('maxYValue', maxYValue, interval)

const yAxisData:any = new Array(6).fill(0).map((v, i) => i*interval)
console.log('yAxisData',yAxisData)

const initChart = () => {
  const myChart = echarts.init(charDom.value)
  const option =  {
    tooltip: {
      trigger: 'axis'
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all'
        }
      ]
    },
    grid: dataList.map((v, i) => ({
      left: `${5+95/dataList.length*i}%`,
      width: `${95/(dataList.length)}%`,
    })),
    yAxis: dataList.map((v, i) => ({
      gridIndex: i,
      show: true,
      inverse: true,
      // type: 'value',
      min: 0,
      name: v.name,
      // interval,
      // data: yAxisData,
      // 分割线
      splitLine: { 
        show: true,
        lineStyle: {
          type: 'dashed' 
        }
      },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
      axisLabel: { show: i === 0 },
    })),
    xAxis: dataList.map((v, i) => ({
      gridIndex: i,
      show: false,
      boundaryGap: false,
      // 分割线
      splitLine: { show: false },
      // 坐标轴线
      axisLine: { show: false },
      // 刻度线
      axisTick: { show: false },
    })),
    series:[
      ...dataList.map((v, i) => ({
        xAxisIndex: i,
        yAxisIndex: i,
        type: 'line',
        name: v.name,
        // data: v.data,
        data: v.data.map((d, j) => [d[0], j*interval]),
      }))
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
